<%@ page import="com.lsk.util.UtilUUID" %>
<%@ page import="com.lsk.util.GlobalParameter" %><%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/10/27 0027
  Time: 下午 5:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <link href="/mobileGroup/css/base.css" rel="stylesheet"/>
    <link href="/mobileGroup/css/inde_css.css?version=<%=UtilUUID.getUUID()%>" rel="stylesheet"/>
    <link rel="stylesheet" href="/mobileGroup/css/hby.css" type="text/css"/>
    <title>${activityInfo.name}</title>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript" charset="utf-8"></script>
    <script src="/mobileGroup/js/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="/mobileGroup/js/flexible.min.js" type="text/javascript"></script>
    <script src="/mobileGroup/js/jquery.SuperSlide.2.1.3.js" type="text/javascript"></script>
    <script src="/layui-v2.4.5/layui/layui.js"></script>
    <script src="groupJs/groupIndex.js?version=<%=UtilUUID.getUUID()%>" type="text/javascript" charset="utf-8"></script>

</head>

<body onload="countTime()">


<div class="mb" id="mb">
    <div id="fx_img" >
        <img src="groupImg/groupfxbg.png" style="width: 86%">
    </div>
</div>

<div id="audioBox" class="audio_box" style="background-image:url(/mobileGroup/img/music.png)" onclick="pauseAudio()">
    <audio id="audio1" preload="auto" autoplay loop>
        <source src="http://resource.dingyuankeji.shop/dingyuan/activity2020/${orgInfo.id}/${activityInfo.id}.mp3" type="audio/mpeg">
    </audio>
</div>


<script>
    wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: '${wxAuthorization.appid}', // 必填，公众号的唯一标识
        timestamp:${wxAuthorization.timestamp}, // 必填，生成签名的时间戳
        nonceStr: '${wxAuthorization.nonceStr}', // 必填，生成签名的随机串
        signature: '${wxAuthorization.signature}',// 必填，签名
        jsApiList: ['updateAppMessageShareData','updateTimelineShareData','hideMenuItems','showMenuItems','onMenuShareAppMessage','onMenuShareTimeline'] // 必填，需要使用的JS接口列表
    });

    wx.ready(function(){

        //老版本
        wx.onMenuShareAppMessage({
            title: '${member.name}邀请您参加${activityInfo.name}', // 分享标题
            desc: '${activityInfo.transmitTitle}', // 分享描述
            link: 'http://<%=GlobalParameter.domain%>/mobileGroup/groupIndex?orgId=${orgInfo.id}&activityId=${activityInfo.id}&parentId=${member.id}&groupId=${groupId}', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: '${logoPath}', // 分享图标
            success:function(res) {
                //window.location.href="/mobileMarketing/transmitFriend?uuid=${uuid}";
                //这里是回调函数
                transmitFriend();
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });

        //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
        wx.onMenuShareTimeline({
            title: '${member.name}邀请您参加${activityInfo.transmitTitle}', // 分享标题
            link: 'http://<%=GlobalParameter.domain%>/mobileGroup/groupIndex?orgId=${orgInfo.id}&activityId=${activityInfo.id}&parentId=${member.id}&groupId=${groupId}', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: '${logoPath}', // 分享图标
            success: function(res) {
                //这里是回调函
                transmitMoments();
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });

        wx.hideMenuItems({
            menuList: ['menuItem:share:qq','menuItem:share:weiboApp','menuItem:favorite','menuItem:share:facebook'
                ,'menuItem:share:QZone','menuItem:originPage','menuItem:readMode','menuItem:openWithQQBrowser'
                ,'menuItem:openWithSafari','menuItem:copyUrl'] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
        });
        wx.showMenuItems({
            menuList: ['menuItem:profile','menuItem:addContact'] // 要显示的菜单项，所有menu项见附录3
        });

    });
</script>

<input type="hidden" id="groupId" value="${groupId}">
<input type="hidden" id="parentId" value="${member.id}">
<input type="hidden" id="orgId" value="${orgInfo.id}">
<input type="hidden" id="activityId" value="${activityInfo.id}">
<input type="hidden" id="tempGroupId" value="<%=UtilUUID.getUUID()%>">

<input type="hidden" name="uuid" id="uuid" value="${uuid}">
<input type="hidden" name="endTime" id="endTime" value="${activityInfo.endTime}">



<div id="payDiv"></div>
<%--门店--%>
<div class="mdian">本活动由${orgInfo.name}发起</div>
<!--红包-->
<div id="snowFlow"></div>
<div>
    <div class="center">
        <div class="center_top" style="padding:0px !important;">
            <c:forEach items="${imgPathList}" var="imgList" begin="0" end="0" >
                <img src="${imgList.path}" width="100%" height="100%">
            </c:forEach>

            <ul>
                <%--二级返利规则--%>
                <c:if test="${activityInfo.oneRebate >0.3 && activityInfo.twoRebate >0.3 }">
                    <li class="lili1" ><div>佣金</div><div>攻略</div></li>
                </c:if>
                   <%-- 拼团规则--%>
                    <c:if test="${ruleList !=null}"><li class="lili2"><div>拼团</div><div>优惠</div></li></c:if>

                    <c:if test="${packConfig !=null}"> <li class="lili3"><div>推广</div><div>佣金</div></li></c:if>


                    <c:if test="${activityInfo.publicityButton eq 0}"><li class="lili4"><div>我要</div><div>制作</div></li></c:if>

                <div class="top_menu"><img src="/mobileGroup/img/top.png"></div>
            </ul>
        </div>
        <!-- 排行榜以下-->
        <div class="ranking">
            <div class="interesting">
                <img src="/mobileGroup/img/img.png">
            </div>
            <!-- 佣金排行榜-->
            <div class="commission_list">
                <div class="commission_list_title">佣金排行榜</div>
                <img src="/mobileGroup/img/i11.png">
                <div class="money" ><span style="color: black !important;">已获得0</span>元</div>
                <div>
                    <!-- 名称-->
                    <div class="commission_title">
                        <div>排名</div>
                        <div>用户</div>
                        <div>佣金</div>
                    </div>
                    <!-- 列表-->
                    <div class="cycle">
                        <div class="txtMarquee-top">
                            <div class="bd">
                                <ul class="infoList">
                                    <c:forEach items="${redPackLogs.redList}" var="redList" varStatus="index">
                                        <li>
                                            <div class="pm">${index.index+1}</div>
                                            <div class="picture">
                                                <img src="${redList.heardUrl}"/>
                                                <span>${redList.name}</span>
                                            </div>
                                            <div class="cycle_rigth">
                                                <div class="mon">${redList.rebateMoney/100}</div>
                                                <div class="commission_title">邀请${redList.oneSonMember}人</div>
                                            </div>
                                        </li>
                                    </c:forEach>

                                </ul>
                            </div>
                        </div>

                        <script type="text/javascript">
                            jQuery(".txtMarquee-top").slide({mainCell:".bd ul",autoPlay:true,effect:"topMarquee",vis:5,interTime:50});
                        </script>
                    </div>
                    <!-- 进度条-->
                    <c:if test="${packConfig !=null}">
                        <div>
                            <div class="pg_text">获得佣金进度</div>
                            <progress max="100" value="${redPackLogs.percent}" id="pg"></progress>
                        </div>
                    </c:if>
                </div>
            </div>
            <!-- 倒计时-->
            <div class="remaining_time">
                <img src="/mobileGroup/img/i11.png">
                <div class="time">
                    <img src="/mobileGroup/img/i8.png"><p>已有<span class="number">${activityStatistics.participationNumber}</span>人报名</p><img src="/mobileGroup/img/i8.png">
                </div>
                <div class="activity">
                    <div class="activity_time"><span></span><p>距离活动时间</p><span></span></div>
                    <img src="/mobileGroup/img/i10.png">
                    <div class="activity_time_content">
                        <p>距结束:</p>
                        <p><span id="_d"></span>天</p>
                        <p><span id="_h"></span>时</p>
                        <p><span id="_m"></span>分</p>
                        <p><span id="_s"></span>秒</p>
                    </div>
                </div>
                <div style="    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    width: 89%;">
                    <%--<div class="browse" >转发次数:${activityStatistics.transmitNumber}</div>--%>
                    <div class="browse">浏览人数:${activityStatistics.browseNumber}</div>
                </div>

            </div>
            <!-- 倒计时结束-->
           <%-- 宣传图片--%>

            <c:forEach items="${imgPathList}" var="imgList" begin="1" >
                <img src='${imgList.path}?version=${imgList.version}' class="img_list" width="96%"
                 style="margin: 0px auto;">
            </c:forEach>


            <!-- 参与人数-->
            <div  id="footer_box">

            </div>

            <!-- 底部-->
            <div class="three">
                <%--我的--%>
                <div class="wd">
                    <a href="/mobileGroup/groupGoMyInfo?orgId=${orgInfo.id}&activityId=${activityInfo.id}&parentId=${member.id}&groupId=${groupId}"> <img src="img/wode.png"></a>
                </div>

                    <c:choose>
                        <c:when test="${buttonType == 1}">
                            <div class="mount"><img src="http://resource.dingyuankeji.shop/icon/wx/d0511657870ec28b2e2f8306dd71c68.png"></div>
                        </c:when>
                        <c:when test="${buttonType == 2}">
                            <div class="mount"><img src="img/cantuan.png"></div>
                        </c:when>
                        <c:when test="${buttonType == 3}">
                            <div class="mount3 "><img src="img/yaoqinghaoyou.png" onclick="showMb()"></div>
                        </c:when>
                    </c:choose>

                    <%--联系我们--%>
                <div class="about" id="about"><img src="img/lianxiwomen.png"></div>
            </div>


        </div>

    </div>

</div>
<!--朦层-->
<div class="posi">
    <div class="posi_list">
        <!-- 1-->
        <c:if test="${activityInfo.oneRebate >0.3 && activityInfo.twoRebate >0.3 }">
            <div class="pop_up" id="lili1">
                <div class="head">邀请好友参与一起赚佣金</div>
                <div class="title"><img src="/mobileGroup/img/i2.png"><span>获取佣金方式</span><img src="/mobileGroup/img/i3.png"></div>
                <div class="list">
                    <ul>
                        <li><p>&nbsp;客户将活动分享朋友参与可获得平台
                            <span style="color: red">${activityInfo.oneRebate/100}</span>元的佣金奖励
                        </p></li>

                        <li><p>&nbsp;二次分享朋友参与活动，平台再次给予
                            <span style="color: red">${activityInfo.twoRebate/100}</span>元的佣金奖励</p></li>
                    </ul>
                </div>
                <div class='pic'>
                    <img src="/mobileGroup/img/i4.png" class="pic-left">
                    <img src="/mobileGroup/groupMyShareQc?memberId=${member.id}&groupId=${groupId}" class="pic-code"><span>扫描此二维码即可参加活动。</span>
                </div>
            </div>
        </c:if>
        <!-- 2-->
        <c:if test="${ruleList !=null}">
            <div class="pop_up" id="lili2">
                <div class="head">拼团得优惠</div>
                <div class="title"><img src="/mobileGroup/img/i2.png"><span>优惠说明</span><img src="/mobileGroup/img/i3.png"></div>
                <div class="list">
                    <ul>
                        <c:forEach items="${ruleList}" var="rule" end="4">
                            <li>
                                <p>
                                    团人数达到<span style="color: red">${rule.personNumber}</span>人，拼团价为<span style="color: red">${(originalPrice-rule.money)/100}</span>元，系统自动向已支付客户退还差额。
                                </p>
                            </li>
                        </c:forEach>

                    </ul>
                </div>
                <div class='pic'>
                    <img src="/mobileGroup/img/i4.png" class="pic-left">
                    <img src="/mobileGroup/groupMyShareQc?memberId=${member.id}&groupId=${groupId}" class="pic-code"><span>扫描此二维码即可参加活动。</span>
                </div>
            </div>
        </c:if>

        <!-- 3-->
        <c:if test="${packConfig !=null}">
            <div class="pop_up" id="lili3">
                <div class="head">福利佣金</div>
                <div class="title"><img src="/mobileGroup/img/i2.png"><span>佣金大派送</span><img src="/mobileGroup/img/i3.png"></div>
                <div class="list">
                    <ul>
                        <li><p>&nbsp;推广人数达到${packConfig.population}人（无论是否购买，均是您的推广人数），
                            平台将向您随机发放${packConfig.minPrice} 至 ${packConfig.maxPrice}元佣金</p>
                    </ul>
                </div>
                <div class='pic'>
                    <img src="/mobileGroup/img/i4.png" class="pic-left">
                    <img src="/mobileGroup/groupMyShareQc?memberId=${member.id}&groupId=${groupId}" class="pic-code"><span>扫描此二维码即可参加活动。</span>
                </div>
            </div>
        </c:if>
        <!-- 4-->
        <c:if test="${activityInfo.publicityButton eq 0}">
            <div class="posi_about" id="lili4">
                <div class="contact_pop_up">
                    <div class="head" style="opacity: 0">1234</div>
                    <div class="contact_title"><img src="img/i2.png"><span></span><img src="img/i3.png"></div>
                    <div class="addres">
                        <div><span>联系人</span><span>：李佳琪</span></div>
                        <div class="phone"><a href="tel:0371-55080169"><span>联系电话</span><span>：0371-55080169</span></a></div>
                        <%--<div><span>公司地址</span><span>：郑州市管城区郑汴路东明路交叉口恒泰国际A座912</span></div>--%>
                    </div>
                    <div><img src="img/lijizhizuoQC.jpg" width="40%"><div class="gengd">扫描微信了解更多</div></div>
                </div>
            </div>
        </c:if>
    </div>

    <%--<div class="wrong">--%>
        <%--<img src="/mobileGroup/img/i1.png">--%>
    <%--</div>--%>
</div>



        <!--联系我们-->
        <div class="posi_about">
            <div class="contact_pop_up">
                <div class="contact_title"><img src="img/i2.png"><span>${orgInfo.name}</span><img src="img/i3.png"></div>
                <div class="addres">
                    <div><span>负责人</span><span>：${orgInfo.person}</span></div>
                    <div class="phone"><span>客服电话</span><span>：${orgInfo.tel}</span></div>
                    <div><span>店面地址</span><span>：${orgInfo.address}</span></div>
                </div>
            </div>
        </div>





<!-- 立即购买-->
<div class="posi1">
    <div class="contact">
        <div class="contact_pop_up">
            <div class="contact_head">邀请好友参与一起赚赏金</div>
            <div class="contact_title"><img src="/mobileGroup/img/i2.png"><span>${orgInfo.name}
            </span><img src="/mobileGroup/img/i3.png"></div>
            <form>



                <c:choose>
                    <c:when test="${activityInfo.isAddress ==1}">  <%--需要填写地址--%>
                        <div class="output">
                            <div><span>姓名:</span>
                                <input  id="name" name="name" placeholder="请输入您的姓名"/>
                            </div>
                            <div>
                                <span>电话:</span><input id="tel" name="tel" placeholder="请输入您的手机号"/>
                            </div>
                            <div>
                                <span>地址:</span>
                                <textarea type="text" id="address" placeholder="请输入地址" ></textarea>
                                    <%--<span>邮箱:</span><input placeholder="请输入您的邮箱账号"/>--%>
                            </div>
                        </div>
                        <button type="button" onclick="groupPay()">立即支付${activityInfo.price/100}参与&nbsp;></button>
                    </c:when>
                    <c:otherwise>
                        <div class="output">
                            <div><span>姓名:</span>
                                <input  id="name" name="name" placeholder="请输入您的姓名"/>
                            </div>
                            <div>
                                <span>电话:</span><input id="tel" name="tel" placeholder="请输入您的手机号"/>
                            </div>
                            <div  style="display: none">
                                <span>地址:</span>
                                <textarea type="text" id="address" placeholder="请输入地址" ></textarea>
                                    <%--<span>邮箱:</span><input placeholder="请输入您的邮箱账号"/>--%>
                            </div>
                        </div>
                        <button type="button" onclick="groupPay()">立即支付${activityInfo.price/100}&nbsp;></button>
                    </c:otherwise>
                </c:choose>



            </form>
        </div>

    </div>
</div>







        <script>

            //点击联系我们
            $('.about').click(function(){
                $('.posi_about').fadeIn()
            })
            //朦层 打开
            $('.posi_about').click(function(e){
                var _con = $(this).children('.contact_pop_up')
//        !$(e.target).closest(".pop_up").length
                if(!_con.is(e.target) && _con.has(e.target).length === 0){
                    $('.posi_about').fadeOut()
                }
            })

        </script>



</div>



<script>
    var x = document.getElementById("audio1");
    function pauseAudio() {
        if(x.paused) {
            x.play();
        } else {
            x.pause();
        }
    }


    <!--兼容iOS-->

    var audo = document.getElementById('audio1');
    audo.play();
    //监听微信浏览器加载事件
    //addEventListener 加事件的意思
    document.addEventListener('WeixinJSBridgeReady', function() {
        audo.play();
    }, false);


</script>
<div id="groupBeforehandPay"></div>
</body>



<script>
    //获取原窗口的高度
    var originalHeight=document.documentElement.clientHeight ||document.body.clientHeight;
    window.onresize=function(){
        //键盘弹起与隐藏都会引起窗口的高度发生变化
        var resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;
        if(resizeHeight-0<originalHeight-0){
            //当软键盘弹起，在此处操作
            $('.contact').attr('style','top:-2rem')
        }else{
            //当软键盘收起，在此处操作
            $('.contact').attr('style','top:1rem')
        }
    }
</script>
<script type="text/javascript">

    $('.posi1').click(function(e){
        var _con = $('.contact').children('.contact_pop_up')
//        !$(e.target).closest(".pop_up").length
        if(!_con.is(e.target) && _con.has(e.target).length === 0) {
            $('.posi1').fadeOut()
        }
    })
    $('.mount').click(function(){
        $('.posi1').fadeIn()
    })



    var coun =0;
    //朦层 打开
    $('.posi').click(function(e){
        var _con = $(this).children('.pop_up')
//        !$(e.target).closest(".pop_up").length
        if(!_con.is(e.target) && _con.has(e.target).length === 0){
            $('.posi').fadeOut();
            /*关闭窗口回复颜色*/
            $('.center_top li').attr('style','background-color:#6554cc');
        }
    })
    $('.center_top li').click(function(){

        var index = $(this).index()
        var className = String($(this).attr('class'))
        // var div_class = String($('.posi_list>div').eq(index).attr('id'))
        var arrs = $('.posi_list>div')
        for(var i =0;i<arrs.length;i++){
            if(className == arrs.eq(i).attr('id')){
                $('.posi_list>div').eq(i).show()
                $('.posi_list>div').eq(i).siblings().hide()
            }
        }
        $('.posi').fadeIn()
        // if(className == div_class){
        //     $('.posi_list>div').eq(index).show()
        //     $('.posi_list>div').eq(index).siblings().hide()
        // }

        /*改变图标背景色*/
        $(this).attr('style','background-color:green;')
        $(this).siblings().attr('style','background-color:#6554cc;')
        $('.top_menu').attr('style','background-color:rgba(73,73,73,0.4);')


    })
    //朦层 关闭
    $('.wrong').click(function(){
        $('.posi').fadeOut();
    })
    //点击上下箭头
    $('.top_menu').on('click',function(){
        coun++;
        //  展开
        if(coun%2 == 0){
            $(this).children('img').attr('style','transform: rot;ate(0deg);-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);transition: all 1s;')
            $('.center_top ul').children('li').attr('style','opacity:1;transition: all 1s;')
        }else{//合住
            $(this).children('img').attr('style','transform: rotate(180deg);-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);transition: all 1s')
            $('.center_top ul').children('li').attr('style','opacity:0;transition: all 1s;')
        }
    })

</script>
<!--倒计时js-->
<script type="text/javascript">
    function countTime() {
        //获取当前时间
        var date = new Date();
        var now = date.getTime();
        //设置截止时间
        var str="${activityInfo.endTime}";
        var endDate = new Date(str);
        var end = endDate.getTime();

        //时间差
        var leftTime = end-now;
        //定义变量 d,h,m,s保存倒计时的时间
        var d,h,m,s;
        if (leftTime>=0) {
            d = Math.floor(leftTime/1000/60/60/24);
            h = Math.floor(leftTime/1000/60/60%24);
            m = Math.floor(leftTime/1000/60%60);
            s = Math.floor(leftTime/1000%60);
        }else {
            d = 0;
            h = 0;
            m = 0;
            s = 0;
        }
        //将倒计时赋值到div中
        document.getElementById("_d").innerHTML = d;
        document.getElementById("_h").innerHTML = h;
        document.getElementById("_m").innerHTML = m;
        document.getElementById("_s").innerHTML = s;
        //递归每秒调用countTime方法，显示动态时间效果
        setTimeout(countTime,1000);




    }
    //红包<!--红包雨的js-->
    // snowFlow();
    function snowFlow(left, height, src) {
        var container = document.createElement('div');
        var pic = document.createElement('img');
        var snowFlow = document.getElementById('snowFlow');
        pic.className = 'pic1';
        container.className = 'container';
        snowFlow.appendChild(container);
        container.appendChild(pic);
        container.style.left = left + 'px';
        container.style.height = height + 'px';
        pic.src = src;
        setTimeout(function () {
            snowFlow.removeChild(container);
        }, 5000);
    }

    setInterval(function () {
        var left = Math.random() * window.innerWidth;
        var height = Math.random() * window.innerHeight;
        var src = '/mobileGroup/img/petal5.png';
        snowFlow(left, height, src);
    }, 500)


</script>
</html>
